<template>
	<globalModal :title="title" :visible="visible" :confirmLoading="confirmLoading" @ok="handleOk" @cancel="handleCancel">
		<a-spin :spinning="confirmLoading">
			<a-form :form="form" autocomplete="off">
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="上级菜单">
					<a-tree-select
						placeholder="请选择上级菜单"
						:dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
						:tree-data="treeData"
						show-search
						:replaceFields="replaceFields"
						@change="changeMenu"
						treeNodeFilterProp="title"
						v-decorator="[
							'parentId',
							{
								rules: [{ required: true, message: '请选择上级菜单' }]
							}
						]"
					/>
				</a-form-item>
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="名称">
					<a-input placeholder="名称" v-decorator="['title', { rules: [{ required: true, message: '名称' }], getValueFromEvent: removeSpaces }]" />
				</a-form-item>
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="权限标识">
					<a-input placeholder="权限标识" v-decorator="['perms', { getValueFromEvent: removeSpaces }]" />
				</a-form-item>
				<a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="排序号" extra="数据越小越靠前">
					<a-input-number v-decorator="['orderNum', { initialValue: 1 }]" :min="1" style="width: 100%;" />
				</a-form-item>
			</a-form>
		</a-spin>
	</globalModal>
</template>

<script>
import { sysManageapi } from '@/api/index.js';
import { ModalMixins } from '@/mixins';
export default {
	name: 'clientMenuListModal',
	mixins: [ModalMixins],
	data() {
		return {
			permissions: [],
			menutype: 0,
			linkway: 2,
			isAddRoot: false,
			iconChooseVisible: false,
			treeData: [],
			replaceFields: { children: 'children', title: 'title', key: 'clientMenuId', value: 'clientMenuId' }
		};
	},
	props: {
		MenuTree: {
			type: Array,
			default: () => []
		}
	},
	components: {},
	created() {},
	methods: {
		add(parentId, parentText) {
			this.title = '新增';
			this.isAdd = true;
			this.isAddRoot = !parentId;
			this.initInfo(
				Object.assign({
					parentId: parentId ? parentId : '0'
				})
			);
		},
		edit(record) {
			this.title = '编辑';
			this.isAdd = false;
			this.initInfo(record);
		},
		initInfo(record) {
			this.mdl = Object.assign({}, record);
			this.visible = true;
			this.getMenuTree();
			this.$nextTick(() => {
				this.form.setFieldsValue(this.$pick(this.mdl, 'title', 'perms', 'orderNum', 'parentId'));
			});
		},
		close() {
			this.$emit('close');
			this.visible = false;
		},
		handleOk() {
			const _this = this;
			// 触发表单验证
			this.form.validateFields((err, values) => {
				// 验证表单没错误
				if (!err) {
					let parameter = Object.assign(
						{},
						{
							clientMenuId: this.mdl.clientMenuId
						},
						values
					);
					
					return false
					_this.confirmLoading = true;
					this.$postAction(_this.isAdd ? sysManageapi.addClientMenu : sysManageapi.editClientMenu, parameter)
						.then(res => {
							if (res && res.code == 200) {
								_this.$message.success('保存成功');
								_this.$emit('ok');
								_this.form.resetFields();
								_this.close();
							}
						})
						.finally(() => {
							_this.confirmLoading = false;
							//
						});
				}
			});
		},
		getMenuTree() {
			this.treeData = [
				{
					clientMenuId: '0',
					title: '根目录',
					children: [...this.MenuTree]
				}
			];
		},
		handleCancel() {
			this.close();
		},
		changeMenu(value) {
			console.log('value', value);
			// let dept = getOrgbyDept(this.treeData, value);
			// this.orgId = dept.orgId;
		},
		changeMenutype(e) {
			this.menutype = e.target.value;
		},
		chooseIcon(icon) {
			this.iconChooseVisible = false;
			this.form.setFieldsValue({
				icon: icon
			});
		},
		selectIcons() {
			this.iconChooseVisible = true;
		}
	}
};
</script>

<style scoped></style>
